<template>
	<view class="page" v-if="!loading">
		<view class="page">
			<view class="mine">
				<uni-section title="任务名称" type="line">
					<uni-card title="" :isFull="true" sub-title="" extra="" :thumbnail="avatar">
						<text class="uni-body">{{task.title}}</text>
					</uni-card>
				</uni-section>
				<uni-section title="任务详情" type="line">
					<uni-card title="" :isFull="true" sub-title="" extra="" :thumbnail="avatar">
						<text class="uni-body">{{task.description}}</text>
					</uni-card>
				</uni-section>
				<uni-section title="评分细则" type="line">
					<uni-card title="" :isFull="true" sub-title="" extra="" :thumbnail="avatar">
						<text class="uni-body">{{task.grading}}</text>
					</uni-card>
				</uni-section>
				<uni-section title="参考原文" type="line">
					<uni-card title="" :isFull="true" sub-title="" extra="" :thumbnail="avatar">
						<text class="uni-body">{{task.note}}</text>
					</uni-card>
				</uni-section>
				<uni-section title="上传文件" v-if="settaskStatustoUpload()" type="line">
					<view class="btn-dock">
						<button type="primary" @click="chooseFiles()">选择文件</button>
						<button @click="uploadFiles()">合并上传</button>
					</view>
					<view title="已选择文件列表" class="item-box-wrapper">
						<view class="item-box-list" v-for="(item, index) in files">
							<uni-card class="filecard">
								<text class="filename">{{item.name}}</text>
								<button class="deFile" style="background-color: red;"
									@click="deletFile(item,index)">删除</button>
							</uni-card>
						</view>
					</view>
					<uni-card>
						<view class="dialog-wrapper">
							<textarea class="story-input" placeholder="请输入" v-model="taskComitContent" maxlength="200"
								@input="sumfontnum"></textarea>
						</view>
						<uni-card>
							<view class="btn-dock">
								<button class="btn-cancel" @click="dialogCancel()">清空</button>
								<button class="btn-save" form-type="submit"
									@click="saveTaskComitContent(taskComitContent)">保存</button>
							</view>
						</uni-card>
					</uni-card>
				</uni-section>
				<uni-section title="上一次提交" class="commitImg" v-if="lastcommitisnotEmpty" type="circle">
					<view>
						<uni-card title="文本内容">
							<text>{{this.lastTaskCommit.content}}</text>
						</uni-card>
						<uni-card>
							<!-- 在某个组件内部显示图片数组 -->
							<view class="image-list">
								<image class="image-item" v-for="(item, index) in lastTaskCommit.taskPhotos"
									:key="index" :src="item" mode="aspectFit"></image>
							</view>
						</uni-card>
					</view>
				</uni-section>
				<uni-section title="优秀作业" type="line">
					<view class="example-body">
						<button class="showExcellent" type="primary" @click="showDrawer('showLeft')"><text
								class="word-btn-white">显示优秀作业</text>
						</button>
						<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
							<view class="close">
								<view class="item-box" v-for="(taskrecord) in excellentTask">
									<view class="taskrecord-box-excellent">
										<uni-card v-bind:title="taskrecord.childrenName"
											v-bind:extra="taskrecord.comments">
											<text>{{taskrecord.score}}</text>
											<view class="image-list">
												<image class="image-item" v-for="(item, index) in taskrecord.taskPhotos"
													:key="index" :src="item" mode="aspectFit"></image>
											</view>
										</uni-card>
									</view>
								</view>
							</view>
						</uni-drawer>
					</view>
				</uni-section>
				<view v-if="settaskStatustoSeeCommand()">
					<uni-section title="成绩显示" type="line" v-if="settaskStatustoSeeCommand()">
						<uni-card v-if="isnotEmpty">
							<view class="grad">
								<text class="uni-body">获得星： {{this.taskEvalute.evaluateStar}}</text>
								<text class="uni-body">分数：{{this.taskEvalute.score}}</text>
								<text class="uni-body">提交时间：{{this.taskEvalute.evaluateTime}}</text>
								<text class="uni-body">排名：{{this.taskEvalute.rank}}</text>
								<text class="uni-body">总排名：{{this.taskEvalute.rankTotal}}</text>
								<!-- <text class="uni-body">总{{this.taskEvalute.totalStar}}</text> -->
							</view>
						</uni-card>
					</uni-section>
					<uni-section title="评语" type="line" v-if="settaskStatustoSeeCommand()">
						<uni-card><text class="uni-body">{{this.taskEvalute.evaluateContent}}</text></uni-card>
					</uni-section>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		BASE_URL
	} from '../../api';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['token', 'children'])
		},
		onShow() {
			uni.request({
				//显示任务详情
				url: BASE_URL + '/taskEvaluateRecord/getTaskEvaluateRecordByChildrenId',
				method: 'GET',
				header: {
					"Authorization": this.token,
				},
				data: {
					childrenId: this.childrenId,
					taskId: this.taskId
				},
				success: (res) => {
					console.log("任务详情");
					console.log(res.data);
					this.taskEvalute = res.data.data;
					if (res.data.data != null) {
						if (res.data.data.commit != null) {
							this.isnotEmpty = true;
						}
					}
					this.loading = false;
				},
			});
			uni.request({
				// 这里是查找上一次
				url: BASE_URL + '/taskRecord/getLastTaskRecord',
				method: 'GET',
				header: {
					"Authorization": this.token,
				},
				data: {
					childrenId: this.childrenId,
					taskId: this.taskId
				},
				success: (res) => {
					console.log("上一次详情");
					console.log(res.data);
					this.lastTaskCommit = res.data.data;
					if (res.data.data != null) {

						this.lastcommitisnotEmpty = true;
					}
					this.loading = false;
				},
			});
			uni.request({
				url: BASE_URL + '/taskEvaluateRecord/getExcellentTask',
				method: 'GET',
				header: {
					"Authorization": this.token,
				},
				data: {
					taskId: this.taskId
				},
				success: (res) => {
					console.log("优秀作业");
					console.log(res.data);
					this.excellentTask = res.data.data;
					// if (res.data.data != null) {
					// 	this.lastcommitisnotEmpty = true;
					// }
					this.loading = false;
				},
			});
		},
		sumfontnum(e) {
			console.log(e);
			this.fontnum = e.detail.value.length;
		},
		onLoad: function(option) {
			this.taskId = option.taskId;
			this.childrenId = option.childrenId;
			this.task = JSON.parse(option.task);
			this.taskStatus = option.taskStatus;
			console.log(this.taskStatus);
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		data() {
			return {
				excellentTask: [],
				showRight: false,
				showLeft: false,
				lastcommitisnotEmpty: false,
				taskComitContent: "",
				fontnum: '0',
				files: [],
				fontnum: "",
				isnotEmpty: false,
				loading: true,
				taskPhotos: "",
				taskEvalute: [],
				content: "",
				commit: [],
				evaluateContent: "1",
				evaluateStar: "1",
				evaluateTime: "1",
				rank: "",
				rankTotal: "",
				score: "",
				totalStar: "",
				taskStatus: [],
				opentheupload: true,
				opentheCommand: false,
				task: [],
				taskId: "1",
				title: "1",
				childrenId: "1",
				description: "1",
				taskdata: "",
				canclick: "pointer-events:all;",
				done: true,
				sourceType: ['album', 'camera'],
				message: "2",
				lastTaskCommit: [],
			}
		},
		methods: {
			deletFile(index) {
				this.files.splice(index, 1);
			},
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			saveTaskComitContent() {
				this.content = this.taskComitContent;
			},
			dialogCancel() {
				this.taskComitContent = "";
			},
			seefile(file) {
				console.log("seefile");
				console.log(file);
			},
			// 需要设置一个新的filelist来中转，同时使用组件渲染该界面 
			chooseFiles: function() {
				wx.chooseMessageFile({
					count: 5, // 最多可以选择的文件个数
					type: 'all', // 可以选择的文件类型，all表示所有类型
					success: (res) => {
						this.files = this.files.concat(res.tempFiles) // 把文件信息保存到this.files数组中
						console.log(this.files);
						console.log("文件数组");
					}
				});
			},
			uploadFiles() {
				console.log("显示文件")
				for (let file of this.files) {
					console.log(file);
					uni.uploadFile({
						url: BASE_URL + '/taskRecord/uploadTask',
						filePath: file.path, // 本地地址
						name: 'files',
						header: {
							"Authorization": this.token,
						},
						formData: {
							childrenId: this.childrenId, // 你的其他表单数据
							taskId: this.taskId,
							content: this.content
						},
						success: (res) => {
							console.log("确实可以了");
							// 上传成功的回调函数，你可以在这里处理服务器返回的数据
							console.log(res.data);
						},
						fail: (err) => {
							// 上传失败的回调函数，你可以在这里处理错误信息
							console.log(err);
						}
					});
				}
				this.files = [];
			},
			setcommit() {
				var fontnum = "";
				if (this.taskEvalute != null) {
					fontnum = this.taskEvalute.commit.content;
				}
				return fontnum;
			},
			settaskStatustoUpload() {
				if (this.taskStatus.includes("已截止") | this.taskStatus.includes("未开始")) {
					this.opentheupload = false;
					// return (this.canclick = "pointer-events:none;")
				}
				return this.opentheupload;
			},
			settaskStatustoSeeCommand() {
				if (this.taskStatus.includes("已评分")) {
					return this.opentheCommand = true;
				}
			},

		}
	}
</script>

<style>
	@import url("taskMessage.css");
</style>